<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格查询</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body style="padding: 30px ;">
  <div class="container">
    <div class="header">

      <button type="button" class="btn btn-info" id="add">新增</button>

      <button type="button" class="btn btn-info" id="delete">删除</button>

      <button type="button" class="btn btn-info" id="edit">编辑</button>

      <button type="button" class="btn btn-info" id="search">查询</button>

      <input type="text" placeholder="按工号查询" class="selectByNumber" style="width: 80px;">

      <input type="text" placeholder="按姓名查询" class="selectByName" style="width: 80px;">

    </div>

    <table class="table table-responsive" id="mytable">
      <thead>
        <tr>
          <th>序号</th>
          <th>工号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>密码</th>
          <th>年龄</th>
          <th>出生日期</th>
        </tr>
      </thead>

      <tbody id="myTb">
        <tr class="info">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>1001</td>
          <td>张三</td>
          <td>女</td>
          <td>1234</td>
          <td>29</td>
          <td>1991-1-1</td>
        </tr>

        <tr class="warning">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>1002</td>
          <td>李四</td>
          <td>男</td>
          <td>1234</td>
          <td>28</td>
          <td>1992-2-2</td>
        </tr>

        <tr class="info">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>1003</td>
          <td>王五</td>
          <td>女</td>
          <td>1234</td>
          <td>27</td>
          <td>1993-3-3</td>
        </tr>

        <tr class="warning">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>1004</td>
          <td>赵六</td>
          <td>女</td>
          <td>1234</td>
          <td>26</td>
          <td>1994-4-4</td>
        </tr>
      </tbody>

      <!-- 新增&&修改的模态框 -->
      <div class=" modal " id="myModal" data-backdrop="static" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4>编辑员工信息</h4>
            </div>
            <div class="modal-body" style="height: 300px;">
              <form class="form-horizontal" id="myForm" role="form">
                <div class="form-group">
                  <label for="number" class="col-sm-2 control-label">工号</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="number" placeholder="请输入工号"
                      style="margin-bottom: 10px;">
                  </div>
                </div>

                <div class="form-group">
                  <label for="name" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" placeholder="请输入姓名" style="margin-bottom: 10px;">
                  </div>
                </div>

                <div class="form-group">
                  <label for="gender" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="gender" placeholder="请输入性别"
                      style="margin-bottom: 10px;">
                  </div>
                  </label>

                </div>

                <div class="form-group">
                  <label for="password" class="col-sm-2 control-label">密码</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="password" placeholder="请输入密码"
                      style="margin-bottom: 10px;">
                  </div>
                </div>

                <div class="form-group">
                  <label for="age" class="col-sm-2 control-label">年龄</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="age" placeholder="请输入年龄" style="margin-bottom: 10px;">
                  </div>
                </div>

                <div class="form-group">
                  <label for="date" class="col-sm-2 control-label">出生日期</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="date" placeholder="请输入年月日:XXXX-YY-zz"
                      style="margin-bottom: 10px;">
                  </div>
                </div>
                <input type="hidden" id="hiddenInput" vv="">
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="btutton" id="submit" class="btn btn-primary">提交</button>
            </div>
          </div>
        </div>
      </div>
    </table>
  </div>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript">

    function formReset() {
      //重置表单
      $('#myForm')[0].reset();
    }

    //新增按钮点击
    $('#add').click(function () {
      formReset();
      // 新增之前 清空vv
      $('#hiddenInput').prop("vv", "");
      $('#myModal').modal('show');
    })

    //修改按钮点击
    $('#edit').click(function () {
      var selectIndex;
      var selectCount = 0;
      $('.subCheck').each(function (i, j) {
        if (j.checked === true) {
          selectCount++;
          selectIndex = i;
        }
      })
      if (selectCount !== 1) {
        alert("请选择一条数据进行修改");
      } else {
        //拿到tr值
        var mytr = $("#myTb tr:eq(" + selectIndex + ")");
        $('#number').val(mytr.find("td:eq(1)").text());
        $('#name').val(mytr.find("td:eq(2)").text());
        $('#gender').val(mytr.find("td:eq(3)").text());
        $('#password').val(mytr.find("td:eq(4)").text());
        $('#age').val(mytr.find("td:eq(5)").text());
        $('#date').val(mytr.find("td:eq(6)").text());

        //为隐藏的input vv属性赋值,赋上当前选中的table中的索引
        $('#hiddenInput').prop("vv", selectIndex);
        $('#myModal').modal('show');
      }
    })

    //提交按钮点击
    $('#submit').click(function () {
      var number = $('#number').val();
      var name = $('#name').val();
      var gender = $('#gender').val();
      var password = $('#password').val();
      var age = $('#age').val();
      var date = $('#date').val();

      if (number == "" || name == "" || gender == "" || password == ""
        || age == "" || date == ""
      ) {
        alert("请检查是否有未填项！！");
      } else {
        var vvValue = $('#hiddenInput').prop("vv");
        if (vvValue == "" || vvValue == undefined || vvValue == null) {
          var number = $('#number').val();
          var name = $('#name').val();
          var gender = $('#gender').val();
          var password = $('#password').val();
          var age = $('#age').val();
          var date = $('#date').val();
          //向表中插入数据
          var classInfo;
          var index = $('.subCheck').length + 1;
          if (index % 2 == 0) {
            var trString = `<tr class="warning">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>${number}</td>
          <td>${name}</td>
          <td>${gender}</td>
          <td>${password}</td>
          <td>${age}</td>
          <td>${date}</td>
        </tr>`;
          } else {
            var trString = `<tr class="info">
          <td>
            <input type="checkbox" class="subCheck">
          </td>
          <td>${number}</td>
          <td>${name}</td>
          <td>${gender}</td>
          <td>${password}</td>
          <td>${age}</td>
          <td>${date}</td>
        </tr>`;
          }

          $('#myTb').append(trString);
          $('#myModal').modal('hide');
        } else {
          //获取当前需要修改的tr
          var selectTr = $("#myTb tr:eq(" + vvValue + ")");
          //进行数据的修改
          selectTr.find("td:eq(1)").text($('#number').val());
          selectTr.find("td:eq(2)").text($('#name').val());
          selectTr.find("td:eq(3)").text($('#gender').val());
          selectTr.find("td:eq(4)").text($('#password').val());
          selectTr.find("td:eq(5)").text($('#age').val());
          selectTr.find("td:eq(6)").text($('#date').val());
          selectTr.find("td:eq(0) input[type='checkbox']").prop("checked", false);
          $('#myModal').modal('hide');
        }
      }
    })

    //删除操作
    $('#delete').click(function () {
      var delArr = [];
      $('.subCheck').each(function (i, j) {
        if (j.checked == true) {
          delArr.push(i);
        }
      })
      if (delArr.length < 1) {
        alert("请至少选择一条数据进行删除！");
      } else {
        delArr.forEach(function (obj, i) {
          var j = delArr[i] - i;
          $('#myTb tr:eq(' + j + ')').remove();
        })
      }
    })

    //查询操作
    $('#search').click(function () {

      var inputValue = $('.selectByNumber').val();
      var inputValue2 = $('.selectByName').val();

      if (inputValue != 0) {


        var valArr = [];

        $("#myTb tr td:nth-child(2)").each(function () {
          valArr.push($(this).text());
        });

        for (var i = 0; i < valArr.length; i++) {
          var value = valArr[i];
          if (inputValue == value) {
            var index = i + 1;
            console.log(index);
          }
        }

        $('#myTb tr').each(function (i) {
          if (i + 1 == index) {
            $($('tr').get(i + 1)).show();
          } else {
            $($('tr').get(i + 1)).hide();
          }
        })
      } else if (inputValue2 != 0) {
        //按姓名来传值


        var valArr2 = [];

        $("#myTb tr td:nth-child(3)").each(function () {
          valArr2.push($(this).text());
        });

        for (var i = 0; i < valArr2.length; i++) {
          var value2 = valArr2[i];
          if (inputValue2 == value2) {
            var index2 = i + 1;
            console.log(index2);
          }
        }

        $('#myTb tr').each(function (i) {
          if (i + 1 == index2) {
            $($('tr').get(i + 1)).show();
          } else {
            $($('tr').get(i + 1)).hide();
          }
        })
      } else {
        alert('请往输入框中输入相关内容！')
      }


    })
  </script>
</body>

</html>